<template>
	<div class="sl_task_card__container">
    <div class="icon">
      <icon type="icon-shenpi1" size="3"></icon>
    </div>
    <div class="cont">
      <div class="title">
        <span>{{title}}</span>
        <span>{{state}}</span>
      </div>
      <div class="time">{{time}}</div>
      <div class="price">¥ {{price}}</div>
      <div class="info">
        <slot name="info"></slot>
      </div>
      <div class="desc">
        <slot name="desc"></slot>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    name: 'sl-task-card',
    props: {
      title: String,
      state: String,
      time: String,
      price: String
    }
  }
</script>

<style lang="stylus" type="text/stylus" scoped>
  @import "~assets/css/theme"
  
  .sl_task_card__container
    background #fff
    padding 1 * .61rem
    margin-bottom 10px
    >div
      &.icon
        float left
      &.cont
        padding-left 4 * .61rem
        .title
          display flex
          justify-content space-between
          font-size $sl_font_size_14
          span:nth-child(2)
            color $sl_font_color_desc
        .time
          font-size $sl_font_size_default
          color $sl_font_color_desc
          padding-top 5px
        .price
          font-size $sl_font_size_14
          padding 10px 0
        .info
          font-size $sl_font_size_14
          color $sl_font_color_desc
        .desc
          font-size $sl_font_color_desc
          color $sl_font_color_desc
          display flex
          align-items center
          padding-top 5px
          .gutter
            padding 0 .4 * .61rem
          .from, .to
            width 9 * .61rem
            overflow hidden
            text-overflow ellipsis
            white-space nowrap
            -webkit-line-clamp 1
            display inline-block
        >*
          width 100%
</style>
